<template>
  <div class="upload-content">
    <el-upload ref="uploadRef" :action="uploadUrl" :accept="accept" :before-upload="beforeUpload">
      <slot></slot>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, defineEmits } from "vue"
import { uploadByPieces } from "@/utils/comUpload"
import ApiPublic from "@/api/public.js";

const props = defineProps({
  accept: String
})
const emits = defineEmits(["uploadComplete", "uploading", "uploadError"])
let uploadUrl = ref(import.meta.env.VITE_APP_BASE_URL)
let uploadRef = ref(null)

const open = () => {}
const beforeUpload = (file, res) => {
  uploadByPieces({
    file: file, // 文件实体
    pieceSize: 2, // 分片大小
    baseURL: ApiPublic.uploadMultiUpload, //接口地址
    selectedSize: 1024, // 用于抽取文件首尾各多少字节作为md5值
    success: async (response) => {
      emits("uploadComplete", response, file)
    },
    uploading: (res) => {
      //分片传输中
      let percentage = parseInt((res.current / res.total) * 100)
      emits("uploading", percentage)
    },
    error: (error) => {
      emits("uploadError", error)
    }
  })
  return false
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.upload-content {
  :deep(.el-upload-list) {
    display: none;
  }
}
</style>
